<template>
    <el-dialog title="已完成作业指令" :visible.sync="dialogForm" width="1100px">
        <el-form :inline="true" :model="condition" class="search-form mt-10" label-width="80px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="作业目的" clearable>
                        <el-select v-model="condition['search_EQ_jobPurpose']" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictJobPurpose" :key="key" :label="val"
                                       :value="key"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="箱号">
                        <el-input v-model="condition['search_LIKE_containerNo']" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="目的场位">
                        <el-input v-model="condition['search_LIKE_purposeField']" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="现机械" clearable>
                        <auto-search-machine :valid="true" :name="condition['search_LIKE_presentMachine']"
                                             @selectName="v=>condition['search_LIKE_presentMachine']=v"></auto-search-machine>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="目的机械">
                        <auto-search-machine :valid="true" :name="condition['search_LIKE_purposeMachine']"
                                             @selectName="v=>condition['search_LIKE_purposeMachine']=v"></auto-search-machine>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业状态">
                        <el-select v-model="condition['search_EQ_status']" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictCommandStatus" :key="key" :label="val"
                                       :value="key"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="作业日期">
                        <!-- <date-slot :startDate.sync="condition.search_GTE_endTime"
                                   :endDate.sync="condition.search_LTE_endTime"></date-slot> -->
                    <el-date-picker v-model="condition.search_GTE_endTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker> 至 
                    <el-date-picker v-model="condition.search_LTE_endTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" icon="el-icon-search"
                               v-if="power('WJOB_CONTROL_CONTAINER_COMMAND:QUERY')" @click="loadData">查 询
                    </el-button>
                    <el-button @click="handleExport">导出Excel</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-alert title="" class="mt-10 alert-color" type="success" :closable="false">
            <span>已完成总计：{{ total }}</span>
        </el-alert>
        <el-table :data="table" border stripe max-height="500" class="mt-10"
                  :v-loading="listLoading"
                  :row-style="{'cursor': 'pointer'}" @row-click="handleTableClick">
            <el-table-column prop="releaseTime" label="发布时间"  min-width="155"></el-table-column>
            <el-table-column prop="endTime" label="作业时间"  min-width="155"></el-table-column>
            <el-table-column prop="jobPurpose" label="作业目的"  min-width="110">
                <template slot-scope='scope'>
                    {{ scope.row.jobPurpose | _filterJobPurpose }}
                </template>
            </el-table-column>
            <el-table-column prop="containerNo" label="箱号"  min-width="120"></el-table-column>
            <el-table-column label="到/发站"  min-width="110">
                <template slot-scope="scope">
                    <span v-if="scope.row.jobPurpose==='JC'||scope.row.jobPurpose==='NZCC'||scope.row.jobPurpose==='CXYX'">{{ scope.row.stratStationName || scope.row.endStationName }}</span> 
                    <span v-if="scope.row.jobPurpose==='TX'||scope.row.jobPurpose==='NZRC'||scope.row.jobPurpose==='CXFC'" >{{ scope.row.endStationName || scope.row.stratStationName }}</span>   
                </template>
            </el-table-column>
            <el-table-column prop="presentField" label="现场位"  min-width="120"></el-table-column>
            <el-table-column prop="purposeField" label="目的场位"  min-width="120"></el-table-column>
            <el-table-column prop="presentMachine" label="现机械"  min-width="120"></el-table-column>
            <el-table-column prop="purposeMachine" label="目的机械"  min-width="120"></el-table-column>
            <el-table-column prop="containerType" label="箱型"  min-width="75"></el-table-column>
            <el-table-column prop="containerSize" label="尺寸"  min-width="75"></el-table-column>
            <el-table-column prop="ifHeavy" label="空重"  min-width="75">
                <template slot-scope="scope">
                    {{ scope.row.ifHeavy | _filterIfHeavyType }}
                </template>
            </el-table-column>
            <el-table-column prop="tradeType" label="内外贸"  min-width="100">
                <template slot-scope="scope">
                    {{ scope.row.tradeType | _filterTradeType }}
                </template>
            </el-table-column>
            <el-table-column prop="cargoName" label="货名"  min-width="75"></el-table-column>
            <el-table-column prop="cargoWeight" label="货重"  min-width="75"></el-table-column>
        </el-table>
        <el-row class="bottom mt-10" type="flex" justify="space-between">
            <div class="oper">
            </div>
            <el-pagination class="page" @size-change="size=>pageInfo.iDisplayLength=size"
                           layout="total, sizes, prev, pager, next, jumper"
                           :current-page.sync="pageInfo.pageStart" :page-sizes="pageInfo.pageArr"
                           :page-size="pageInfo.iDisplayLength" :total="total">
            </el-pagination>
        </el-row>
        <command-form ref="commandForm" :isFinished="isFinished" @load="loadCommand" :modal="false"
                      @loadUn="loadCommand"></command-form>
    </el-dialog>
</template>

<script>
    import { getFinishedCommand, getCommad, } from "@/api/middleControl/middleControl";
    import commandForm from "./commandForm";
    import autoSearchMachine from "@/components/autocomplete/autoSearchMachine";
    import dateSlot from "@/components/date/dateSlot";
    import { newExportExcel } from "@/utils/newExport";
    import { ifHeavyType, tradeType, jobPurpose } from "../../../assets/dict";
    import { getLocalTime } from "@/utils/dateFormat";

    export default {
        name: "finished",
        components: { commandForm, autoSearchMachine, dateSlot },
        data() {
            return {
                dialogForm: false,
                pageSearch: '',
                table: [],
                condition: {//条件
                    search_GTE_endTime:'',
                    search_LTE_endTime:'',
                },
                isFinished: false,
                total: 0,
                pageInfo: this.$defalutPage(),
                listLoading: false,
            }
        },
        mounted() {
        },
        methods: {
            loadData() {
                this.listLoading = true
                let params = this.$assist.copySearchConditions(this.condition)
                params.iDisplayStart = this.pageInfo.pageStart - 1
                params.iDisplayLength = this.pageInfo.iDisplayLength
                params.sortType = '-lastModifiedDateTime'
                params.search_EQ_visible = true
                getFinishedCommand(params).then(res => {
                    this.table = res.data.aaData;
                    this.total = res.data.iTotalRecords
                    this.listLoading = false
                    this.$emit('load', res.data.iTotalRecords)
                });
            },
            // 已作业指令表格弹窗
            handleTableClick(item) {
                this.isFinished = true;
                this.getCommandInfo(item.id);
            },
            getCommandInfo(id) {
                getCommad(id).then(res => {
                    this.$refs.commandForm.dialogForm = true;
                    let data = []
                    for (let i = 0; i < res.data.aaData.length; i++) {
                        const el = res.data.aaData[i]
                        if (!el.purposeField || !el.presentMachine) {
                            data.push({
                                ...el,
                                showInput: true
                            })
                        } else {
                            data.push({
                                ...el,
                                showInput: false
                            })
                        }
                    }
                    this.$refs.commandForm.command = data;
                });
            },
            loadCommand() {
                this.$emit('load')
            },
            handleExport() {
                let map = new Map();
                map.set('releaseTime', '发布时间')
                map.set('endTime', '作业时间')
                map.set('jobPurpose', '作业目的')
                map.set('containerNo', '箱号')
                map.set('endStationName', '到站')
                map.set('stratStationName', '发站')
                map.set('presentField', '现场位')
                map.set('purposeField', '目的场位')
                map.set('presentMachine', '现机械')
                map.set('purposeMachine', '目的机械')
                map.set('containerType', '箱型')
                map.set('containerSize', '尺寸')
                map.set('ifHeavy', '空重')
                map.set('tradeType', '内外贸')
                map.set('cargoName', '货名')
                map.set('cargoWeight', '货重')
                let params = this.$assist.copySearchConditions(this.condition)
                params.iDisplayLength = 99999
                params.sortType = '-lastModifiedDateTime'
                params.search_EQ_visible = true
                getFinishedCommand(params).then(res => {
                    let exportRecords = [];
                    let exportArr = res.data.aaData;
                    exportArr.forEach(record => {
                        let exportRecord = {};
                        for (let [key, value] of map.entries()) {
                            if (key === "ifHeavy") {
                                record[key] = ifHeavyType.get(record[key]);
                            }
                            if (key === "tradeType") {
                                record[key] = tradeType.get(record[key]);
                            }
                            if (key === "jobPurpose") {
                                record[key] = jobPurpose.get(record[key]);
                            }
                            exportRecord[value] = record[key];
                        }
                        exportRecords.push(exportRecord);
                    });
                    newExportExcel("已完成指令列表", exportRecords);
                })
            }
        },
        watch: {
            pageInfo: {
                deep: true,
                handler: function () {
                    this.loadData()
                }
            }
        }
    }
</script>

<style scoped>

</style>
